---
title: Astroのインストールとセットアップ
description: 'Astroをインストールして新しいプロジェクトを開始しましょう。'
i18nReady: true
banner:
  content: |
    Astro v5 が登場! <a href="/ja/guides/upgrade-to/v5/">サイトのアップグレード方法を学ぶ</a>
---
import { CardGrid, FileTree, LinkCard, Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import ReadMore from '~/components/ReadMore.astro';

[`create astro`](#cliウィザードからインストールする)CLIコマンドは、新しいAstroプロジェクトをゼロから作成する最速の方法です。このコマンドは、新しいAstroプロジェクトのセットアップに必要なすべてのステップをガイドし、複数の公式スターターテンプレートから選択できるようにします。

また、[既存のテーマやスターターテンプレート](#テーマやスターターテンプレートを使用する)を使用してプロジェクトを開始できます。

手動でAstroをインストールする場合は、[ステップバイステップの手動インストールガイド](#手動セットアップ)を参照してください。

:::tip[オンラインでプレビュー]
ブラウザでAstroを試してみたいですか？[astro.new](https://astro.new/)にアクセスすれば、ブラウザを離れることなく、スターターテンプレートを確認して新しいAstroプロジェクトを作成できます。
:::

## 前提条件

- **Node.js** - `v18.17.1`または`v20.3.0`以上。（`v19`はサポート対象外です。）
- **テキストエディタ** - [VS Code](https://code.visualstudio.com/)と[公式のAstro拡張機能](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)を使うことをおすすめします。
- **ターミナル** - Astroにはコマンドラインインターフェース（CLI）を通じてアクセスします。

## ブラウザの互換性

Astroはデフォルトで、モダンなJavaScriptをサポートするブラウザをターゲットとしています。詳細については、[Viteがサポートするブラウザバージョンのリスト](https://ja.vite.dev/guide/build#browser-compatibility)を参照してください。

## 新しいプロジェクトを開始する

### CLIウィザードからインストールする

<Steps>
1. 以下のコマンドをターミナルで実行して、インストールウィザードを起動します。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      # npmで新しいプロジェクトを作成
      npm create astro@latest
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      # pnpmで新しいプロジェクトを作成
      pnpm create astro@latest
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      # yarnで新しいプロジェクトを作成
      yarn create astro
      ```
      </Fragment>
    </PackageManagerTabs>

    `create astro`はマシン上のどこでも実行でき、プロジェクトを開始する前に新しい空のディレクトリを作成する必要はありません。新しいプロジェクトのための空のディレクトリがまだない場合、ウィザードが自動的に作成します。

    問題がなければ成功のメッセージが表示され、推奨される次のステップがいくつか続きます。プロジェクトが作成されたら、新しいプロジェクトのディレクトリに`cd`してAstroを使い始められます。

2. CLIウィザードで"Install dependencies?"のステップを飛ばした場合は、依存関係をインストールしてから続行してください。

3. 以上により、[Astroの開発サーバーを起動](#astroの開発サーバーを起動する)して、プロジェクトのライブプレビューを確認できるようになりました！
</Steps>

### テーマやスターターテンプレートを使用する

[公式のサンプル](https://github.com/withastro/astro/tree/main/examples)や任意のGitHubリポジトリの`main`ブランチを使用して新しいAstroプロジェクトを開始するには、`create astro`コマンドに`--template`引数を渡します。

<Steps>
1. [テーマとスターターのショーケース](https://astro.build/themes/)で、ブログ、ポートフォリオ、ドキュメントサイト、ランディングページなどのテーマを閲覧できます！また、GitHubでその他のスタータープロジェクトを[検索](https://github.com/search?o=desc&q=astro+starter&s=stars&type=Repositories)することもできます。

2. 以下のコマンドをターミナルで実行します。公式Astroスターターテンプレート名か、使用したいテーマのGitHubユーザー名とリポジトリを指定してください。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      # 公式のサンプルを使用して新しいプロジェクトを作成
      npm create astro@latest -- --template <example-name>

      # GitHubリポジトリのmainブランチを使用して新しいプロジェクトを作成
      npm create astro@latest -- --template <github-username>/<github-repo>
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      # 公式のサンプルを使用して新しいプロジェクトを作成
      pnpm create astro@latest --template <example-name>
      
      # GitHubリポジトリのmainブランチを使用して新しいプロジェクトを作成
      pnpm create astro@latest --template <github-username>/<github-repo>
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      # 公式のサンプルを使用して新しいプロジェクトを作成
      yarn create astro --template <example-name>
      
      # GitHubリポジトリのmainブランチを使用して新しいプロジェクトを作成
      yarn create astro --template <github-username>/<github-repo>
      ```
      </Fragment>
    </PackageManagerTabs>

    デフォルトでは、このコマンドはテンプレートリポジトリの`main`ブランチを使用します。異なるブランチ名を使用する場合は、`--template`引数の一部として`<github-username>/<github-repo>#<branch>`のように渡します。


3. CLIウィザードの質問に回答し、指示に従ってください。

4. 以上により、[Astroの開発サーバーを起動](#astroの開発サーバーを起動する)して、プロジェクトをカスタマイズしながらライブプレビューを確認できるようになりました！
</Steps>

## プロジェクトの編集

プロジェクトを編集するには、コードエディタでプロジェクトフォルダを開きます。開発モードで開発サーバーを実行しながら作業すると、コードを編集するたびにサイトの更新を確認できます。

また、TypeScriptの設定や公式Astroエディタ拡張機能のインストールなど、[開発環境のカスタマイズ](#開発環境の設定)も可能です。

### Astroの開発サーバーを起動する

Astroには、プロジェクト開発に必要な機能がすべてが備わっている、組み込みの開発サーバーが付属しています。`astro dev` CLIコマンドを実行するとローカル開発サーバーが起動するため、新しいウェブサイトを最初の段階から動作確認できます。

すべてのスターターテンプレートには、`astro dev`を実行するための設定済みスクリプトが付属しています。プロジェクトディレクトリに移動してから、好みのパッケージマネージャを使用してこのコマンドを実行し、Astro開発サーバーを起動します。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>


問題がなければ、Astroは[http://localhost:4321/](http://localhost:4321/)でプロジェクトを配信します。ブラウザでリンクを開き、新しいサイトを確認してください！

### 開発モードで作業する

Astroは`src/`ディレクトリ内のファイル変更をリアルタイムで監視し、開発中に変更を加えるとサイトのプレビューを更新します。開発中に変更を加えるたびにサーバーを再起動する必要はありません。開発サーバーが起動しているときにブラウザでサイトを表示すれば、常に最新のバージョンを確認できます。

ブラウザでサイトを表示すると、[Astroの開発ツールバー](/ja/guides/dev-toolbar/)にアクセスできます。開発中に[アイランド](/ja/concepts/islands/)を検査したり、アクセシビリティの問題を見つけたりするのに役立ちます。

開発サーバーを起動したにもかかわらずプロジェクトをブラウザで開けない場合は、`dev`コマンドを実行したターミナルに戻り、表示されているメッセージを確認してください。エラーの有無や、[http://localhost:4321/](http://localhost:4321/)以外のURLでプロジェクトが配信されているかどうかが表示されているはずです。

### 開発環境の設定

以下のガイドを参照して、開発環境をカスタマイズしてください。

<CardGrid>
  <LinkCard
    title="エディタのセットアップ"
    description="コードエディタをカスタマイズし、Astroの開発体験を向上させたり、新しい機能を利用できるようにします。"
    href="/ja/editor-setup/"
  />
  <LinkCard
    title="開発ツールバー"
    description="開発ツールバーの便利な機能について学びます。"
    href="/ja/guides/dev-toolbar/"
  />
</CardGrid>

### AstroとTypeScript

Astroは[TypeScript](https://www.typescriptlang.org/)を組み込みでサポートしており、これによりコード内のオブジェクトやコンポーネントの型を定義してランタイムエラーを防ぐことができます。

Astroプロジェクトでは、TypeScriptの恩恵を受けるためにTypeScriptのコードを特別に書く必要はありません。Astroはコンポーネントコードを常にTypeScriptとして扱い、[AstroのVSCode拡張機能](/ja/editor-setup/)はそれをもとにできる限り推論し、エディタ内で自動補完、ヒント、エラーを提供します。

<ReadMore>[AstroでのTypeScript](/ja/guides/typescript/)の使い方や設定についてもっと学ぶ</ReadMore>

## サイトのビルドとプレビュー

ビルドして作成されるサイトを確認するには、開発サーバーを終了（<kbd>Ctrl</kbd> + <kbd>C</kbd>）して、ターミナルでパッケージマネージャに応じたビルドコマンドを実行します。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm run build
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm build
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn run build
      ```
      </Fragment>
    </PackageManagerTabs>

Astroは、デフォルトでは`dist/`フォルダにデプロイ可能なサイトをビルドしますが、その進捗状況をターミナルで確認できます。本番環境にデプロイする前に、プロジェクトのビルドエラーがあればそこで通知されます。TypeScriptが`strict`または`strictest`に設定されている場合は、`build`スクリプトはプロジェクトの型エラーもチェックします。

ビルドが完了したら、ターミナルで適切な`preview`コマンド（たとえば`npm run preview`）を実行しましょう。開発時と同じブラウザのプレビューウィンドウ内で、ローカルでビルドされたサイトを確認できます。

このコマンドは、ビルドコマンドが最後に実行された際のコードをプレビューするという点に注意してください。つまり、サイトが[ウェブにデプロイ](#新しいサイトのデプロイ)されたときの見た目をプレビューするために使用します。ビルド後にコードを変更しても、ビルドコマンドを再度実行しない限り、プレビュー中のサイトには反映されません。

<kbd>Ctrl</kbd> + <kbd>C</kbd>を使用してプレビューを終了してから、[開発モードで作業する](#開発モードで作業する)ために開発サーバーを再起動するなど、別のターミナルコマンドを実行します。開発モードでは編集するたびにサイトが更新されるため、コード変更のライブプレビューを確認できます。

<ReadMore>Astroでのサイト作成時に使用する[Astro CLI](/ja/reference/cli-reference/)やターミナルコマンドについてもっと学ぶ。</ReadMore>

## 新しいサイトのデプロイ

多くのコードを追加・変更する前に、[新しいサイトをすぐにデプロイ](/ja/guides/deploy/)したい場合があります。これにより、最小限の動作するサイトを公開でき、デプロイのトラブルシューティングにかかる余分な時間と労力を節約できます。

## 次のステップ

完了です！これでAstroでの開発を始める準備が整いました！🥳

続いて以下の内容に進んでみましょう。どの順番で読んでも構いません。あるいはドキュメントを一時的に離れて、新しいAstroプロジェクトのコードベースで遊んでみてもいいかもしれません。問題が発生したときや質問があるときには、いつでもここに戻ってきてください。

### Astroの機能を学ぶ

<CardGrid>
  <LinkCard
    title="コードベースを理解する"
    description="プロジェクト構造のガイドでAstroのファイル構造について学ぶ。"
    href="/ja/basics/project-structure/"
  />
  <LinkCard
    title="コンテンツコレクションを作成する"
    description="新しいサイトにフロントマターのバリデーションと自動の型安全性を備えたコンテンツを追加する。"
    href="/ja/guides/content-collections/"
  />
    <LinkCard
    title="ビュートランジションを追加する"
    description="ページ間のシームレスなトランジションとアニメーションを作成する。"
    href="/ja/guides/view-transitions/"
  />
  <LinkCard
    title="アイランドについて学ぶ"
    description="Astroのアイランドアーキテクチャについて読む。"
    href="/ja/concepts/islands/"
  />
</CardGrid>

### チュートリアルを進める

完全に機能するAstroブログをゼロから作成する、[入門チュートリアル](/ja/tutorial/0-introduction/)を進めてみましょう。

これは、Astroの仕組みを理解し、またページやレイアウト、コンポーネント、ルーティング、アイランドなどの基本を学ぶのに最適な方法です。また、ウェブ開発の各概念全般について不慣れな人向けのオプションのユニットも含まれており、コンピュータへの必要なアプリケーションのインストールやGitHubアカウントの作成、サイトをデプロイする方法についても案内しています。

## 手動セットアップ

このガイドでは、新しいAstroプロジェクトを手動でインストールして設定する手順について説明します。

`create astro` CLIツールを使用したくない場合は、以下のガイドに従って自分でプロジェクトを設定してください。

<Steps>
1. ディレクトリを作成する

    新しいプロジェクトの名前で空のディレクトリを作成し、そのディレクトリに移動します。

    ```bash
    mkdir my-astro-project
    cd my-astro-project
    ```

    新しいディレクトリに移動したら、プロジェクトの`package.json`ファイルを作成します。これにより、Astroなどのプロジェクトの依存関係を管理します。このファイル形式に不慣れな場合は、以下のコマンドを実行して作成することも可能です。

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm init --yes
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm init 
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn init --yes
      ```
      </Fragment>
    </PackageManagerTabs>

2. Astroをインストールする

    まず、Astroプロジェクトの依存関係をプロジェクトにインストールします。

    :::note[Important]
    Astroはグローバルではなくローカルにインストールする必要があります。`npm install -g astro`や`pnpm add -g astro`、`yarn add global astro`を実行しないようにしてください。
    :::

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install astro
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add astro
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add astro
      ```
      </Fragment>
    </PackageManagerTabs>

    続いて、`package.json`の「scripts」セクションにあるプレースホルダーを以下の内容に置き換えます。

    ```json title="package.json" del={2} ins={3-6}
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "preview": "astro preview"
      },
    ```

    あとでこのスクリプトを使用してAstroを起動したり、その他のコマンドを実行したりします。

3. 最初のページを作成する

    テキストエディタで、ディレクトリ内の`src/pages/index.astro`に新しいファイルを作成します。これがプロジェクトの最初のAstroページになります。

    このガイドでは、以下のコードスニペット（`---`ダッシュを含む）を新しいファイルにコピーして貼り付けます。

    ```astro title="src/pages/index.astro"
    ---
    // Astroにようこそ！この3つのハイフンのコードフェンスの中にあるものは、
    // 「コンポーネントのフロントマター」です。ブラウザで実行されることはありません。
    console.log('ここはブラウザではなく、ターミナルで実行されます！');
    ---
    <!-- 以下は「コンポーネントテンプレート」です。単なるHTMLですが、
        素晴らしいテンプレートを作成するための魔法が散りばめられています。 -->
    <html>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>
    <style>
      h1 {
        color: orange;
      }
    </style>
    ```

4. 最初の静的アセットを作成する

    `public/`ディレクトリを作成して静的アセットを保存する必要もあるでしょう。Astroは、常にこれらのアセットをビルド結果に含めるため、コンポーネントテンプレート内から安全に参照できます。

    テキストエディタで、ディレクトリ内の`public/robots.txt`に新しいファイルを作成します。`robots.txt`は、Googleなどの検索ボットにサイトの扱い方を伝えるために、多くのサイトが利用しているシンプルなファイルです。

    このガイドでは、以下のコードスニペットを新しいファイルにコピーして貼り付けます。

    ```diff title="public/robots.txt"
    # 例: すべてのボットにサイトのスキャンとインデックスを許可します。
    # 完全な構文: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
    User-agent: *
    Allow: /
    ```

5. `astro.config.mjs`を作成する

    `astro.config.mjs`によりAstroを設定します。Astroの設定をおこなわない場合このファイルは不要ですが、今作成しておくと便利です。

    プロジェクトのルートに`astro.config.mjs`を作成し、以下のコードをコピーして貼り付けます。

    ```js title="astro.config.mjs"
    import { defineConfig } from 'astro/config';

    // https://astro.build/config
    export default defineConfig({});
    ```

    ReactやSvelteなどの[UIフレームワークコンポーネント](/ja/guides/framework-components/)、またはTailwindやPartytownなど他のツールをプロジェクトで使用する場合は、ここに[手動でインテグレーションをインポートして設定](/ja/guides/integrations-guide/)することになります。

    Astroの[API設定リファレンス](/ja/reference/configuration-reference/)を読み、詳細を確認してください。

6. TypeScriptサポートを追加する

    `tsconfig.json`を使用してTypeScriptを設定します。TypeScriptのコードを書かない場合でも、AstroやVS Codeなどのツールがプロジェクトを理解する方法を知るために、このファイルは重要です。`tsconfig.json`ファイルがなければ、エディタ上でのnpmパッケージのインポートなど、一部の機能が完全にはサポートされません。

    TypeScriptコードを書く予定がある場合は、Astroの`strict`または`strictest`テンプレートを使用することをおすすめします。3種類の設定用テンプレートは[astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/)で確認できます。

    プロジェクトのルートに`tsconfig.json`を作成し、以下のコードをコピーして貼り付けます。（`base`、`strict`、`strictest`の3種類のTypeScriptテンプレートを使用できます）

    ```json title="tsconfig.json" "base"
    {
      "extends": "astro/tsconfigs/base"
    }
    ```

    Astroの[TypeScriptセットアップガイド](/ja/guides/typescript/#setup)を読み、詳細を確認してください。

7. 次のステップ

    以上の手順に従った場合、プロジェクトディレクトリは以下のようになっているはずです。

    <FileTree>
    - node_modules/
    - public/
      - robots.txt
    - src/
      - pages/
        - index.astro
    - astro.config.mjs
    - package-lock.jsonまたは`yarn.lock`や`pnpm-lock.yaml`など
    - package.json
    - tsconfig.json
    </FileTree>

8. 以上により、[Astroの開発サーバーを起動](#astroの開発サーバーを起動する)して、プロジェクトのライブプレビューを確認できるようになりました！

</Steps>
